<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css学习笔记</title>

    <style>

        /* 权重:id > class > 元素选择器 */

        /* css的代码可写在style标签里 */

        /*p {  p 元素选择器：所有p标签都会变 

            属性：属性值 
            color: purple; 
        }*/
        
        #two {
            /* id选择器：id为two的标签的内容会改变 */
            color: red;
        }
        /* id选择器有先于元素选择器：即被id选择器改变的内容不会被元素选择器改变了 */

        .text-red {
            /* 类选择器：类名为text-red的内容会被修改 */
            color: red;
        }

        .one p {
             /* 后代选择器:类名为one 且被p标签修饰的内容被改变 */
            color: blue;
        }
        .two span {
            font-size: large;
            /* 后代选择器:类名为two 且被span标签修饰的内容被改变 */
            color: blueviolet;
        }

        h2,h3,h4 {
            /* 群组选择器： 将h2 h3 h4三个标签 一起改变颜色 */
            color: blueviolet;
        }
        
    </style> 
</head>
<body>
    <h3>静夜思</h3>
        <p>床前明月光,疑是地上霜</p>
        <p id="two" >举头望明月,低头思故乡</p>
        <!-- 每个标签都可以设置id,一般每个标签的id都不同 -->
        <hr>

    <h3>静夜思</h3>
    <p class="text-red">床前明月光,疑是地上霜</p>
    <p class="text-red">举头望明月,低头思故乡</p>
    <p class="text-red">床前明月光,疑是地上霜</p>
    <p>举头望明月,低头思故乡</p>
    <hr>

    <div class="one">
        <p>床前明月光,疑是地上霜</p>
        <p>举头望明月,低头思故乡</p>
        <span>床前明月光,疑是地上霜</span><br>
        ==============================
    </div>
    <hr>
    

    <div class="two">
        <span>床前明月光,疑是地上霜</span><br>
        <span>举头望明月,低头思故乡</span><br>
        <span>床前明月光,疑是地上霜</span><br>
    </div>
    <hr>

    <!-- 一步把以下三句话一起改变颜色 -->
    <h2>我是h2</h2>
    <h3>我是h3</h3>
    <h4>我是h4</h4>
    <hr>

    
</body>
</html>